<template>
	<view>
		<!-- 订单状态 -->
		<view class="status-view">
			<view class="status-title-view">
				<view v-if="data.status == 0" class="status-title util-font-medium">待支付</view>
				<view v-else-if="data.status == 1" class="status-title util-font-medium">未使用</view>
				<view v-else-if="data.status == 2" class="status-title util-font-medium">已完成</view>
				<view v-else-if="data.status == 3 && data.refundStatus == 1" class="status-title util-font-medium">退款中</view>
				<view v-else-if="data.status == 3 && data.refundStatus == 2" class="status-title util-font-medium">退款完成</view>
				<view v-else-if="data.status == 4" class="status-title util-font-medium">已取消</view>
				<view v-else class="status-title util-font-medium">未知状态</view>
				<view v-if="data.status == 0" class="status-button util-font-regular" @click="cancel">不想要了，取消订单</view>
			</view>
			<view v-if="data.status == 0" class="payment-time-view">
				<image class="payment-time-image" src="../../static/order/clock.png" mode="aspectFit"></image>
				<view class="payment-time-title util-font-regular">剩余支付时间</view>
				<view class="payment-time-text util-font-regular">{{timerString}}</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="content-view">
			<view class="item-info-view" @click="productDetail">
				<image class="item-info-image" src="https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/image3.png" mode="aspectFill"></image>
				<view class="item-info-content util-font-regular">
					<view class="item-info-name util-font-medium">{{data.merProduct.name}}</view>
					<view class="item-info-number">数量：{{data.number}}</view>
					<view class="item-info-amount util-font-medium">
						<text class="item-info-amount-price1">总价：</text>
						<text class="item-info-amount-price2">￥</text>
						<text class="item-info-amount-price3">{{data.amount/100.}}</text>
						<text v-if="data.type == 0 && data.shareUserAmount" class="price-brokerage">返佣{{data.shareUserAmount/100.0}}元</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 消费码 -->
		<view v-if="data.status == 1" class="content-view">
			<view class="content-title util-font-medium">
				消费码
			</view>
			<view class="time-view util-font-regular">
				<view class="time-text2">有效期：{{data.merProduct.startVerifyTime.split(" ")[0] + ' 至 ' + data.merProduct.endVerifyTime.split(" ")[0]}}</view>
			</view>
			<view class="code-vew">
				<view class="code-text util-font-medium">{{insertStr(insertStr(data.verifyCode, 6, " "), 3," ")}}</view>
				<view class="code-button util-font-regular" @click="toUse">去使用</view>
				<!-- <view class="code-button util-font-regular" @click="copyCode">复制</view> -->
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="content-view">
			<view class="content-title util-font-medium">
				商家信息
			</view>
			<view class="mer-info-view">
				<view class="mer-info">
					<view class="mer-name util-font-medium">{{data.merMerchant.name}}</view>
					<view class="mer-address util-font-regular" @click="merAddress">
						<image class="mer-address-image" src="../../static/index/icon_address.png" mode="aspectFit"></image>
						<text class="mer-address-text util-font-regular" style="margin-left: 15upx;">{{data.merMerchant.address}}</text>
					</view>
				</view>
				<view class="mer-phone-view" @click="merPhone">
					<view class="mer-phone-content">
						<view class="mer-phone-title util-font-regular">预约电话</view>
						<image class="mer-phone-image" src="../../static/index/phone.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="content-view">
			<view class="content-title util-font-medium">
				订单信息
			</view>
			<view class="order-info-content">
				<view class="row">
					<view class="row-title util-font-regular">订单编号</view>
					<view class="row-text util-font-regular">{{data.orderNo}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">下单时间</view>
					<view class="row-text util-font-regular">{{data.createTime}}</view>
				</view>
				<view v-if="data.status != 0 && data.status != 4" class="row">
					<view class="row-title util-font-regular">付款时间</view>
					<view class="row-text util-font-regular">{{data.payTime}}</view>
				</view>
				<view v-if="data.status == 2" class="row">
					<view class="row-title util-font-regular">使用时间</view>
					<view class="row-text util-font-regular">{{data.verifyTime}}</view>
				</view>
				<view v-if="data.status == 3 && data.refundStatus == 2" class="row">
					<view class="row-title util-font-regular">退款时间</view>
					<view class="row-text util-font-regular">{{data.refundTime}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">数量</view>
					<view class="row-text util-font-regular">{{data.number}}</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">总价</view>
					<view class="row-text util-font-regular">{{data.amount/100.}}元</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">使用红包</view>
					<view class="row-text util-font-regular">{{data.redPacketMoney/100.}}元</view>
				</view>
				<view class="row">
					<view class="row-title util-font-regular">实付金额</view>
					<view class="row-text util-font-regular">{{data.payment/100.}}元</view>
				</view>
			</view>
			<view class="order-button-view">
				<button class="order-button-service" type="default" open-type="contact">
					<image class="order-button-image" src="../../static/order/order_service.png" mode="aspectFit"></image>
					<text class="order-button-text util-font-regular">联系客服</text>
				</button>
				<view class="order-button-copy" @click="copyOrderNo">
					<image class="order-button-image" src="../../static/order/order_copy.png" mode="aspectFit"></image>
					<text class="order-button-text util-font-regular">复制订单编号</text>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view v-if="data.status==0 || data.status==2 || ((data.status==3&&data.status==1) || (data.status==3&&data.status==2)) || data.status==4" :class="footerViewClass" style="position: static;background-color: rgba(255,255,255,0.0);">

		</view>
		<!-- 底部按钮 -->
		<view v-if="data.status==0 || data.status==2 || ((data.status==3&&data.status==1) || (data.status==3&&data.status==2)) || data.status==4" :class="footerViewClass">
			<view class="custom-footer-button-border"></view>
			<view v-if="data.status == 0" class="custom-footer-button-item util-font-medium" @click="pay">￥{{data.payment/100.}}    立即支付</view>
			<view v-if="data.status == 2" class="custom-footer-button-item util-font-regular" @click="buyAgain">再次购买</view>
			<view v-if="data.status == 3" class="custom-footer-button-item util-font-regular" @click="buyAgain">再次购买</view>
			<view v-if="data.status == 4" class="custom-footer-button-item util-font-regular" @click="buyAgain">再次购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			footerViewClass: function() {
				if (this.$util.systemRect().safeAreaBottomHeight != 0) {
					return "custom-footer-button-view"
				} else {
					return "custom-footer-button-view safeAreaInsetsBottom"
				}
			},
			halfTop: function() {
				return uni.upx2px(30) + 'px'
			},
			headerStatusImage: function() {
				var url = ''
				switch (this.status) {
					case 0:
						url = '../../static/order/color@2x.png'
						break;
					case 1:
						url = '../../static/order/color@2x.png'
						break
					case 2:
						url = '../../static/order/dsh@2x.png'
						break
					case 3:
						url = '../../static/order/finish.png'
						break
					case 4:
						url = '../../static/order/tk@2x.png'
						break

					default:
						break;
				}
				return url
			}

		},
		data() {
			return {
				id: null,
				isActivity: 0,
				data: null,

				timer: null,
				timerString: '',
				isTimerReload: false,
				


			}
		},
		onLoad(options) {
			var that = this
			uni.$on('orderDetailRefresh', function() {
				that.loadData(false)
			})

			this.id = options.id
			this.loadData(true)
		},
		onHide() {
			clearInterval(this.timer)
		},
		methods: {
			loadData: function(refresh) {
				var that = this
				that.sendRequest({
					url: 'app/ordOrders/info/' + that.id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: res => {
						console.log(res)
						that.data = res.data.data
						if (refresh == true) {
							uni.$emit('orderListRefresh', that.data)
						}
						
						if (that.data.status == 0 && !that.isTimerReload) {
							that.timer = setInterval(that.timeSecond, 1000);
						}
					},
					fail: function(){
						clearInterval(that.timer)
					}
				})
			},
			timeSecond: function() {

				var that = this
				var orderTime = Date.parse(this.data.createTime.replace(/-/g,"/"))
				var finishTime = orderTime + 1000 * 60 * 30 + 1
				var nowTime = Date.parse(Date())
				var subTime = finishTime - nowTime
				// var hour = this.$util.formatNumber(Math.floor((subTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)))
				
				var minute = Math.floor((subTime % (1000 * 60 * 60)) / (1000 * 60))
				var second = Math.floor((subTime % (1000 * 60)) / 1000)
				
				if (minute <= 0 && second <= 0) {
					
					clearInterval(that.timer)
					that.isTimerReload = true
					that.loadData(true)
					
					return
				}

				this.timerString = this.$util.formatNumber(minute) + '分' + this.$util.formatNumber(second) + '秒'
			},
			insertStr : function(soure, start, newStr){   
			   return soure.slice(0, start) + newStr + soure.slice(start);
			},
			productDetail: function(){
				var that = this
				uni.navigateTo({
					url: '../index/detail?pid=' + that.data.merProduct.id
				})
			},
			toUse: function(){
				var that = this
				uni.navigateTo({
					url: './code?oid=' + that.id
				})
			},
			copyCode: function(){
				var that = this
				uni.setClipboardData({
					data: that.data.verifyCode,
					success() {
						console.log('消费码已添加到剪贴板')
					}
				})
			},
			merAddress: function() {
				var that = this
				const latitude = parseFloat(that.data.merMerchant.lat);
				const longitude = parseFloat(that.data.merMerchant.lng);
				uni.openLocation({
				    latitude: latitude,
				    longitude: longitude,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			merPhone: function(){
				var that = this
				uni.makePhoneCall({
					phoneNumber: that.data.merMerchant.phone
				})
			},
			copyOrderNo: function(){
				var that = this
				uni.setClipboardData({
					data: that.data.orderNo,
					success: function() {
						
					}
				})
			},
			// 立即支付
			pay: function() {
				console.log('pay')
				var that = this
				that.sendRequest({
					url: 'app/ordOrders/toWxpay/' + that.id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: function(wxres) {
						console.log(wxres)

						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxres.data.data.timeStamp,
							nonceStr: wxres.data.data.nonceStr,
							package: wxres.data.data.packageValue,
							signType: wxres.data.data.signType,
							paySign: wxres.data.data.paySign,
							success: function(payres) {
								uni.showToast({
									title: '支付成功',
									mask: true,
									duration: 1000
								})
								that.loadData(true)
							},
							fail: function(err) {
								if (err.errMsg.requestPayment == 'fail cancel') {
									uni.showToast({
										title: '用户取消了支付',
										duration: 1000,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: err.errMsg.requestPayment,
										duration: 1000,
										icon: 'none'
									})
								}
							}
						})
					}
				})
			},
			// 取消订单
			cancel: function() {
				var that = this
				
				uni.showModal({
					title: '取消订单',
					content: '这可能是最低价格，取消之后此订单不可恢复，确定取消？',
					showCancel: true,
					confirmText: '再等等',
					confirmColor: '#FF0000',
					cancelText: '取消订单',
					success(res) {
						if (res.cancel) {
							that.sendRequest({
								url: 'app/ordOrders/cancel/' + that.id,
								method: 'POST',
								header: that.$urlRequest.getHeader('token'),
								success: res => {
									uni.showToast({
										title: '订单已取消',
										mask: true,
										duration: 1000
									})
									
									that.loadData(true)
								}
							})
						}
					}
				});

			},
			
			// 再次购买
			buyAgain: function() {
				var that = this
				uni.navigateTo({
					url: '../index/detail?pid=' + that.data.merProduct.id
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	/* 订单状态 */
	.status-view {
		width: 690rpx;
		margin: 40rpx 30rpx 20rpx;
	}

	.status-title-view {
		width: 690rpx;
		height: 64rpx;
	}

	.status-title {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 46rpx;
		color: #333333;
		float: left;
	}

	.status-button {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #bbbbbb;
		float: right;
	}

	.payment-time-view {
		width: 690rpx;
		height: 30rpx;
		margin: 10rpx 0 30rpx;
	}

	.payment-time-image {
		width: 35rpx;
		height: 35rpx;
		float: left;
	}

	.payment-time-title {
		height: 35rpx;
		line-height: 35rpx;
		color: #666666;
		font-size: 24rpx;
		float: left;
		margin-left: 10rpx;
	}

	.payment-time-text {
		height: 35rpx;
		line-height: 35rpx;
		color: #f1a441;
		font-size: 28rpx;
		float: left;
		margin-left: 10rpx;
	}

	/* 内容view */
	.content-view {
		width: 650rpx;
		margin: 20rpx;
		padding: 30rpx;
		background-color: white;
		border-radius: 15rpx;
	}
	.content-title {
		width: 690upx;
		font-size: 32upx;
		height: 35upx;
		line-height: 35upx;
		margin-bottom: 20upx;
		color: #333333;
	}

	/* 商品信息 */
	.item-info-view {
		width: 100%;
		height: 144upx;
		overflow: hidden;
	}
	.item-info-image {
		width: 180upx;
		height: 144upx;
		float: left;
		border-radius: 10upx;
	}

	.item-info-content {
		width: 440upx;
		height: 144upx;
		margin-left: 30upx;
		float: left;
	}

	.item-info-name {
		color: #333333;
		font-size: 30upx;
		height: 50upx;
		line-height: 50upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.item-info-number {
		color: #999999;
		font-size: 26upx;
		height: 50upx;
		line-height: 50upx;
	}

	.item-info-amount {
		height: 44upx;
		line-height: 44upx;
	}

	.item-info-amount-price1 {
		color: #666666;
		font-size: 28upx;
	}

	.item-info-amount-price2 {
		color: #ea6431;
		font-size: 24upx;
		position: relative;
		top: -2rpx;
	}

	.item-info-amount-price3 {
		color: #ea6431;
		font-size: 36upx;
	}
	.price-brokerage {
		padding: 0upx 8upx 0upx;
		background-color: #ec6e2d;
		height: 30upx;
		line-height: 30upx;
		border-radius: 6upx;
		color: #FFFFFF;
		font-size: 20upx;
		margin-left: 10rpx;
		position: relative;
		top: -5rpx;
	}
	
	/* 核销码 */
	.time-view {
		color: #999999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.code-vew {
		width: 650rpx;
		height: 60rpx;
		position: relative;
		top: 10rpx;
		margin-top: 20rpx;
	}
	.code-text {
		height: 60rpx;
		line-height: 60rpx;
		color: #ea6431;
		font-size: 40rpx;
		float: left;
	}
	.code-button {
		width: 138rpx;
		height: 50rpx;
		color: #ea6431;
		font-size: 28rpx;
		border: 2rpx solid #ea6431;
		border-radius: 30rpx;
		line-height: 50rpx;
		float: right;
		text-align: center;
		margin-top: 5rpx;
	}
	
	/* 商家信息 */
	.mer-info-view {
		width: 650rpx;
		/* height: 90rpx; */
		margin-top: 40rpx;
	}
	.mer-info {
		width: 530rpx;
		display: inline-block;
		/* height: 90rpx; */
		/* float: left; */
	}
	.mer-name {
		width: 500rpx;
		height: 40rpx;
		line-height: 40rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #333333;
	}
	.mer-address {
		width: 500rpx;
		/* height: 40rpx; */
		line-height: 40rpx;
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	.mer-address-image {
		width: 25upx;
		height: 25upx;
		position: relative;
		top: 5upx;
	}
	
	.mer-address-text {
		height: 40upx;
		line-height: 40upx;
		font-size: 24rpx;
		color: #666666;
	}
	
	.mer-phone-view {
		width: 120upx;
		height: 90upx;
		display: inline-block;
		/* float: right; */
		padding-top: 1upx;
	}
	
	.mer-phone-content {
		margin-top: 18upx;
		width: 120upx;
		height: 55upx;
		border-left: 2upx dashed #999999;
	}
	
	.mer-phone-title {
		color: #f1a441;
		font-size: 20upx;
		width: 50upx;
		height: 55upx;
		overflow: hidden;
		float: right;
	}
	
	.mer-phone-image {
		width: 45upx;
		height: 45upx;
		margin: 5upx 8upx;
		float: right;
	}

	/* 订单信息 */
	.order-info-content
	{
		width: 100%;
		margin-top: 30rpx;
	}
	.row {
		width: 100%;
		height: 44upx;
		line-height: 44upx;
	}

	.row-title {
		color: #999999;
		font-size: 24upx;
		height: 44upx;
		line-height: 44upx;
		float: left;
	}

	.row-text {
		color: #666666;
		font-size: 24upx;
		height: 44upx;
		line-height: 44upx;
		float: right;
	}
	
	.order-button-view {
		width: 650rpx;
		height: 55rpx;
		margin-top: 20rpx;
	}
	.order-button-service {
		width: 305rpx;
		height: 35rpx;
		padding: 10rpx;
		text-align: center;
		float: left;
	}
	button {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
		box-sizing: content-box;
	}
	button.order-button-service {
		background-color: rgba(0, 0, 0, 0);
		line-height: 40upx;
		position: relative;
		margin: 0;
	}
	
	button::after {
		border: 0upx;
	}
	.order-button-copy {
		width: 305rpx;
		height: 35rpx;
		padding: 10rpx;
		text-align: center;
		float: right;
	}
	.order-button-image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
	.order-button-text {
		font-size: 26rpx;
		color: #333333;
		height: 30rpx;
		line-height: 30rpx;
		margin-left: 10rpx;
	}

	/* 底部按钮 */
	.custom-footer-button-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140upx;
		background: #FFFFFF;
	}

	.safeAreaInsetsBottom {
		padding-bottom: 20upx;
	}

	.custom-footer-button-border {
		background-color: #F1F1F1;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 2upx;
	}

	.custom-footer-button-item {
		width: 650upx;
		height: 96upx;
		line-height: 96upx;
		background: linear-gradient(to right, #eb8735, #ea6431);
		text-align: center;
		color: white;
		font-size: 36upx;
		border-radius: 48upx;
		margin: 36upx 50upx 36upx 0;
		float: right;
	}

	.custom-footer-button-item1 {
		width: 180upx;
		height: 68upx;
		line-height: 68upx;
		text-align: center;
		color: #ea6431;
		font-size: 30upx;
		border-radius: 34upx;
		border: 2upx solid #ea6431;
		box-sizing: border-box;
		margin: 36upx 30upx;
		float: right;
	}
</style>
